<template>
  <div class="es-charts stick-wrapper">
    <Loading v-show="loading"></Loading>
    <Nav></Nav>
    <h2 class="title">
      分时用电价格表
    </h2>
    <Fee :statistics="statistics"></Fee>
    <h2 class="title">
      能源云计算
    </h2>
    <Chart :unitFee="highFee" :totalFee="total_fee" :loadData="load_data" :profit="profit" :esShow="esShow"></Chart>
    <div class="stick-footer">
      <Footer></Footer>
    </div>
  </div>
</template>

<script>
import Nav from '../components/Nav'
import Footer from '../components/Footer'
import Fee from '../components/FeeStatistic'
import Chart from '../components/FeeTabChart'
import Loading from '../components/loading'

export default {
  name: 'ESCharts',
  data () {
    return {
      loading: true,
      statistics: {},
      load_data: [],
      total_fee: [],
      profit: [],
      esShow: 0
    }
  },
  components: {
    Nav,
    Footer,
    Fee,
    Chart,
    Loading
  },
  mounted () {
    const _this = this
    this.$http.get('get_es_data').then(res => {
      this.loading = false
      const response = res.data
      if (response.status === 1) {
        const data = response.data
        this.statistics = data.statistics
        this.load_data = data.load_data
        this.total_fee = data.total_fee
        this.profit = data.profit
        this.esShow = data.es_show
      }
    }).catch(function () {
      _this.$swal.fire({
        icon: 'error',
        title: '请输入数据'
      }).then(() => {
        console.log('back')
        window.history.length > 1 ? _this.$router.go(-1) : _this.$router.push('/')
      })
    })
  },
  computed: {
    highFee () {
      if ('summer' in this.statistics) {
        return this.statistics.summer[0].fee
      }
      return 0
    }
  }
}
</script>

<style scoped>
  h2.title {
    text-align: center;
    margin-bottom: 18px;
    margin-top: 18px;
    font-size: 20px;
  }
  .light {
    font-weight: normal;
    font-size: 12px;
  }
</style>
